<template>
	<view>
		<view class="shopp">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view " :scroll-top="scrollTop">
				<view
					v-for="(item1, index1) in classification"
					class="u-tab-item"
					:key="index1"
					:data-current="index1"
					:class="[current == index1 ? 'u-tab-item-active' : '']"
					@tap.stop="swichMenu(index1, item1.id)"
				>
					<text>{{ item1.name }}</text>
				</view>
			</scroll-view>
			<view class="shopp1" :style="{ width: width + 'px' }">
				<scroll-view scroll-x class="erjifenglei">
					<text :class="[current1 == -1 ? 'u-tab-item-active' : '']" @tap.stop="swichMenu_a(-1, 0)">全部</text>
					<text
						v-for="(item, index) in toplist"
						:key="index"
						@tap.stop="swichMenu1(index, item.id)"
						:class="[current1 == index ? 'u-tab-item-active' : '']"
					>
						{{ item.name }}
					</text>
				</scroll-view>
				<scroll-view scroll-y scroll-with-animation :style="{ height: height + 'px' }" class="u-tab-view1 ">
					<view class="u-tab-item1" v-for="(item3, index3) in data1" :key="index3">
						<image :src="'https://whb.qianjitianxia.com' + item3.figure" mode="aspectFill"></image>
						<view class="list">
							<view class="text">{{ item3.name }}</view>
							<view class="list1">
								<text>￥{{ item3.price }}</text>
								<view @click="huoqutk(item3.id)">添加商品</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-mask :show="show22" z-index="999999">
					<view class="bulletFrm22">
						<view class="" style="padding: 29rpx;">
							<view class="shop_xx">
								<label>商品图片:</label>
								<u-upload
									ref="uUpload"
									max-count="3"
									:action="action"
									:auto-upload="true"
									@on-success="success2"
									@on-remove="remove"
									width="250rpx"
									height="250rpx"
									multiple
									:show-progress="false"
								></u-upload>
							</view>
							<view class="shop_xx">
								<label>商品名称:</label>
								<input :value="input_a" @input="shopname" style="border-bottom: 1rpx solid #999 ;" />
							</view>
							<view class="shop_xx">
								<label>商品价格:</label>
								<input :value="input_b" @input="shoppice" style="border-bottom: 1rpx solid #999 ;" />
							</view>
						</view>
						<view class="choice">
							<view @click="choices(0)" class="cancel">取消</view>
							<view @click="choices(1)" class="determine">确定</view>
						</view>
					</view>
				</u-mask>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scrollTop: 0, //页面滚动距离
			shopdata: {
				page: 1,
				limit: 10,
				type: 0,
				er_type: 0,
			},
			total: '', //总条数
			classification: [],
			current: 0, // 预设当前项的值
			current1: -1,
			toplist: [],
			width: '',
			height: '',
			data1: [],
			huoqutklist: {},
			show22: false,
			action: 'https://whb.qianjitianxia.com/api/bonus/wx_upload',
			figure: '',
			input_a: '',
			input_b: '',
			shoptij: {
				sid: '',
				sp_id: '',
				type: '',
				name: '',
				price: '',
				figure: '',
			},
		};
	},
	mounted() {
		let thia = this;
		uni.getSystemInfo({
			success: function(res) {
				thia.width = res.screenWidth - 134;
				thia.height = res.screenHeight - 120;
				//console.log(res.screenWidth)
			},
		});
		this.getClassification();
		this.getUsers();
	},
	methods: {
		// 获取分类
		async getClassification() {
			const data = await this.$api('getFrstLvl');
			console.log('获取分类ssss :>> ', data);
			this.classification = data.left;
			this.toplist = data.top_list;
			var ddd = this.classification[0].id;
			this.shopdata.type = ddd;
			this.getGoods1();
			this.erji(ddd);
			//this.toplist = data.top_list;
			console.log('this.toplist :>> ', this.toplist);
		},
		// 获取用户的id
		async getUsers() {
			const res = await this.$api('user.info');
			this.getshopid(res.data.id);
		},
		//获取商家id
		async getshopid(id) {
			const res = await this.$api('usermerchants', {
				uid: id,
			});
			if (res) {
				this.shoptij.sid = res;
			}
		},
		// 获取商品详细
		async getGoods1() {
			const res = await this.$api('shops', this.shopdata);
			console.log(res);
			this.data1 = res.data;
			this.total = res.total;
		},
		// 二级
		async erji(id) {
			const res = await this.$api('getScndLvl', {
				fl_id: id,
			});
			this.toplist = res;
		},
		// 点击左边的栏目切换
		async swichMenu(index, item1) {
			this.erji(item1);
			this.shopdata.type = item1;
			this.shopdata.er_type = 0;
			this.getGoods1();
			if (index == this.current) return;
			this.current = index;
			this.current1 = -1;
			// 将菜单菜单活动item垂直居中
			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
		},
		//全部查询
		swichMenu_a(index, e) {
			this.current1 = index;
			this.shopdata.er_type = e;
			this.getGoods1();
		},
		// 点击右边的栏目切换
		async swichMenu1(index, item1) {
			//this.getGoods(item1);
			this.shopdata.er_type = item1;
			this.getGoods1();
			this.type = item1;
			if (index == this.current1) return;
			this.current1 = index;
			// 将菜单菜单活动item垂直居中
			this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
		},
		// 获取商品弹框
		async huoqutk(id) {
			const res = await this.$api('shopdata', {
				sp_id: id,
			});
			let url = 'https://whb.qianjitianxia.com';
			this.figure = res.figure;
			this.$refs.uUpload.lists = [{ url: url + res.figure }];
			this.input_a = res.name;
			this.input_b = res.price;
			this.shoptij.sp_id = res.id;
			this.shoptij.type = res.type_ids;
			//console.log('获取商品弹框 :>> ', res);
			this.huoqutklist = res;
			this.show22 = true;
		},
		// 上传商品图
		success2(index, lists) {
			this.figure = index.replace(/^\"|\"$/g, '');
			//console.log(this.figure)
		},
		//删除图片
		remove(index, lists) {
			this.figure = '';
		},
		//商品名称
		shopname(e) {
			this.input_a = e.detail.value;
		},
		//商品价格
		shoppice(e) {
			this.input_b = e.detail.value;
		},
		//取消确认
		async choices(e) {
			if (e == 0) {
				this.$refs.uUpload.lists = [];
				this.show22 = false;
			} else {
				var priceReg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
				if (this.figure == '' || this.input_a == '') {
					uni.$showMsg('商品信息不能为空');
				} else if (!priceReg.test(this.input_b)) {
					uni.$showMsg('请输入正确的产品价格');
				} else {
					this.shoptij.figure = this.figure;
					this.shoptij.name = this.input_a;
					this.shoptij.price = this.input_b;
					const res = await this.$api('shopsubmit', this.shoptij);
					this.$refs.uUpload.lists = [];
					uni.$showMsg(res);
					this.show22 = false;
				}
			}
		},
	},
};
</script>

<style lang="scss">
.shopp {
	width: 100%;
	height: 100%;
	overflow: scroll;
	display: flex;
	.u-tab-view {
		width: 208rpx;
		height: 100%;
		overflow: scroll;
		.u-tab-item {
			height: 77rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text {
				line-height: 24rpx;
				height: 24rpx;
				font-size: 25rpx;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #333333;
			}
		}
		.u-tab-item-active {
			background-color: #fff;
			text {
				color: #e8a36c;
			}
		}
	}
	.shopp1 {
		padding: 0;
		.erjifenglei {
			width: 100%;
			white-space: nowrap;
			text {
				padding: 5rpx;
				display: inline-block;
				//width: 90rpx;
				height: 50rpx;
				line-height: 44rpx;
				text-align: center;
				font-size: 25rpx;
				margin-right: 10rpx;
				border-radius: 10rpx;
			}

			.u-tab-item-active {
				color: #fff;

				background-color: #e8a36c;
			}
		}
		.u-tab-view1 {
			margin-top: 15rpx;
		}
		.u-tab-item1 {
			width: 100%;
			height: 160rpx;
			margin-bottom: 20rpx;
			display: flex;
			image {
				width: 160rpx;
				height: 160rpx;
				margin-right: 21rpx;
			}
			.list {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: space-between;
				.text {
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				.list1 {
					display: flex;
					flex-flow: row;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10rpx;
					padding-right: 10rpx;
					text {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ff0000;
					}
					view {
						background-color: #e8a36c;
						font-size: 24rpx;
						width: 120rpx;
						color: #ffffff;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						border-radius: 20rpx;
					}
				}
			}
		}

		.bulletFrm22 {
			width: 630rpx !important;
			//height: 590rpx !important;
			background: #ffffff !important;
			border-radius: 20rpx !important;
			overflow: hidden;
			//	padding: 29rpx;
			display: flex;
			flex-direction: column;
			.shop_xx {
				display: flex;
				flex-flow: row;
				justify-content: flex-start;
				align-items: center;
				font-size: 24rpx;
				margin-bottom: 10rpx;
			}
			input {
				width: 400rpx;
				font-size: 24rpx;
				padding-left: 10rpx;
			}
			.choice {
				width: 100%;
				height: 80rpx;
				//color: 24rpx;
				display: flex;
				//flex-flow: row;
				justify-content: center;
				align-items: center;
				border-top: 1rpx solid #666;
				.cancel {
					width: 50%;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					//border-radius: 10rpx ;
					color: #666;
					border-right: 1rpx solid #666;
				}
				.determine {
					width: 50%;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #ffffff;
					//border-radius: 10rpx ;
					color: red;
				}
				// view {
				// 	width: 80rpx;
				// 	height: 40rpx;
				// 	text-align: center;
				// 	line-height: 40rpx;
				// 	font-size: 24rpx;
				// 	background-color: #e8a36c;
				// 	border-radius: 20rpx;
				// }
				// view:last-child {
				// 	margin-left: 50rpx;
				// 	background-color: #3377ff;
				// }
			}
		}
	}
}
</style>
